<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>节日活动手机端抽奖页面</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
		<!-- 移动端适配的一个js文件 跟当前特效是没有关系的 -->
		<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>

		<!-- 引入jquery -->
		<script src="statics/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- jquery 旋转插件 -->
		<script src="statics/js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 弹框的插件 -->
		<link rel="stylesheet" href="./notiflix/dist/notiflix-3.2.5.min.css" />
		<script src="./notiflix/dist/notiflix-3.2.5.min.js"></script>
		<style>
			.tableTitle{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #9a9a9a;
				font-size: 0.4em;
				padding: 0% 6.5% 0% 2%;
			}
			.tableTitle div:first-of-type{
				margin-right: 11%;
			}
			#userlist tr td:last-of-type,#userlist2 tr td:last-of-type{
				color: #9a9a9a;
				font-size: 0.2em;
			}
			#cache{
				width: 35%;
				background: #ffc924;
				font-size: 0.5em;
				padding: 2% 3%;
				text-align: center;
				margin-left: 67%;
				margin-bottom: 0.8em;
				border-radius: 10px;
				color: white;
			}
			#cache:hover{
				background: #e2b221;
				color: thistle;
			}
			.rule{
				width: 92%;
				padding: 3% 2%;
				background: skyblue;
				margin: 0 auto;
				font-size: 0.5em;
				margin-bottom: 20%;
				border-radius: 10px;
			}
			.rule h3{
				font-weight: bold;
				margin-bottom: 0.4em;
			}
			.rule p{
				font-size: 0.4em;
				margin-bottom: 0.4em;
				color: black;
			}
			.num{
				margin: 0 auto;
				font-size: 00.5em;
			}
			.table{
				overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
				position: relative;
				height: 115px;
				overflow-x: hidden;
				overflow-y: hidden !important;
			}
			.table #userlist,.table #userlist2{
				width: 100%;
			}
			.table #userlist tr,.table #userlist2 tr{
				height: 40px;
			}

		</style>
	</head>

	<body>
		<!-- 大转盘 -->
		<div class="lottery">
			<div class="zhuanpan">
				<div class="turn box">
					<img src="statics/images/zhuanpan.png" alt="">
				</div>
				<div class="control">
					<img src="statics/images/control.png" alt="">
				</div>
			</div>
			<!-- 立即抽奖 -->
			<div class="btn">
				<button class="choujiang">立即抽奖</button>
			</div>
			<div class="num"></div>
		</div>
		
		<!-- 获奖名单 -->
		<div class="container">
			<div class="card hjmd">
				<div class="title"><i></i><span>获奖名单</span><i></i></div>
				<div class="tableTitle">
					<div>昵称</div>
					<div>奖品</div>
					<div>时间</div>
				</div>
				<div class="table">
					<table id="userlist">
						<tbody class="tt">
						<tr class="nopeople" style="display:none;">
							<td colspan="3" style="text-align: center;width: 330px;font-size: 1em;color: black;">无中奖人员</td>
						</tr>
						</tbody>
					</table>
					<table id="userlist2"></table>
				</div>
			</div>
				<div onclick="cache()" id="cache">中奖名单公示</div>
				<div class="rule">
					<h3>活动时间：</h3>
					<p>即日起-2019年12月31日</p>
					<h3>活动内容：</h3>
					<p>活动期间，用户可以在简书App平台「简书钻」页面参与「天天抽奖」。</p>
					<p>活动中奖率高达100%，奖品内容包括：小米手机，10元电话卡，锦鲤徽标，简书借钻，简书贝等。</p>
					<p>*锦鲤徽标：锦鲤是一切跟好运相关的事物，获得锦鲤徽章可以为你带来源源不断的好运。锦鲤徽标仅可以通过抽奖一种渠道获得，每次抽中锦鲤仅有7天有效期，多次抽中可叠加时效。</p>
					<h3>抽奖规则：</h3>
					<p>1.每个用户每天可免费获得五次抽奖机会，还可以通过观看广告获得额外机会，每人每天最多获得七次抽奖机会，每日0点更新。</p>
					<p>2.抽奖后，用户需要观看广告才能获得奖品，退出视为自动放弃。</p>
					<p>3.如发现有恶意刷的行为，简书有权不发放或撤回发放的奖品。</p>
					<p>4.此活动解释权归简书所有。</p>
					<p>5.本次活动与苹果公司无关。</p>
				</div>
	</body>
</html>

<script>
	var action = false  //防止重复点击
	var nickname //创建一个全局变量
	var nopeople = $('.nopeople')
	var num = 3


	
	function opp(){
		var table = document.querySelector('.table')
		var user_list1 = document.querySelector('#userlist')
		var user_list2 = document.querySelector('#userlist2')
		user_list2.innerHTML=user_list1.innerHTML;
		function scrollUp(){
			if(table.scrollTop>=user_list1.offsetHeight){
				table.scrollTop=0;
			}else{
				table.scrollTop++;
			}
		}
		var T;
		T = setInterval(scrollUp,50);
		table.onmouseover=function(){
			learInterval(T);
		}
		table.onmouseout=function(){
			T=setInterval(scrollUp,50);
		}
	}
	opp()
	console.log(opp);
	// 当前抽到奖列表中无用户
	if($('#userlist tr:first').is(nopeople)){
				nopeople.css({display:"block"})
	}
	$(".choujiang").click(function(){
		//防止重复点击
		if(action) return;

		//空 = false
		//如果不为空，直接开始
		if(nickname)
		{
			start()

			return false

		}
			$('.num').text(`--还剩${num}次机会--`)

		//输入昵称
		Notiflix.Confirm.prompt(
			'幸运转盘',
			'请输入您的昵称',
			'',
			'确认',
			'取消',
				function success(success) 
				{
					//正则处理昵称
					//去掉两边的空白
					nickname = $.trim(success)

					if(nickname.length <= 0)
					{
						Notiflix.Notify.warning('您的昵称为空，请输入正确昵称')
						return false
					}

					//开始抽奖
					// 减少可抽奖数量，控制按钮可点击可不点击
					num = --num
					$('.num').text(`--还剩${num}次机会--`)
					start()
					
			},

				function cancel(error) 
				{
					Notiflix.Notify.failure('必须要输入昵称后开始抽奖')
					return false
				}
		)
	})

	//开始抽奖方法
	function start()
	{
		//从10个元素中进行随机选择 0 ~ 10
		var item = Math.floor(Math.random()*11)
		$('.num').text(`--还剩${num}次机会--`)
		if(!num>0){
			$('.num').text(`--今天次数已经用完了，明天再来吧--`)
			$(".choujiang").attr("disabled",'ture');
		}
		//逆时针
		switch (item) {
			case 0:
				rotateFn(0, '谢谢参与');
				num = --num
				break;
			case 1:
				rotateFn(60, '一等奖888元');
				$('.num').text(`恭喜您，抽中了奖品`)
				$(".choujiang").attr("disabled",'ture');
				nopeople.css({display:"none"})
				opp();
				break;
			case 2:
				rotateFn(120, '谢谢参与');
				num = --num
				break;
			case 3:
				rotateFn(180, '三等奖88元');
				$('.num').text(`恭喜您，抽中了奖品`)
				$(".choujiang").attr("disabled",'ture');
				nopeople.css({display:"none"})
				opp();
				break;
			case 4:
				rotateFn(240, '三等奖88元');
				$('.num').text(`恭喜您，抽中了奖品`)
				$(".choujiang").attr("disabled",'ture');
				nopeople.css({display:"none"})
				opp();
				break;
			case 5:
				rotateFn(300, '二等奖188元');
				$(".choujiang").attr("disabled",'ture');
				$('.num').text(`恭喜您，抽中了奖品`)
				nopeople.css({display:"none"})
				opp();
				break;
			case 6: //增加"未中奖"概率
				rotateFn(0, '谢谢参与');
				num = --num
				break;
			case 7:
				rotateFn(360, '谢谢参与');
				num = --num
				break;
			case 8:
				rotateFn(0, '谢谢参与');
				num = --num
				break;
			case 9:
				rotateFn(360, '谢谢参与');
				num = --num
				break;
			case 10:
				rotateFn(0, '谢谢参与');
				num = --num
				break;
		}

	}

	//旋转转盘的方法
	// deg 旋转角度
	// txt 中奖信息
	function rotateFn(deg, txt)
	{		
		//修改action的变量
		action = true

		//先要让转盘静止下来 插件里面的方法
		$('.box').stopRotate()

		//让转盘旋转
		$('.box').rotate({
			angle: 0, //旋转的角度 起始值
			//1800 来意 为了防止 中奖的位置和起始的位置是一样的 
			//送3圈给他 让他先去转 最后在停止到那个中奖的位置
			animateTo: deg + 3600,//从当前角度旋转多少度  结束点
			duration: 3000, //持续时间
			callback: function() //回调函数 旋转完之后会触发回调函数
			{
				//当转换结束旋转后需要将 判断 防止点击的变量修改回原来的值
				action = false

				if(txt == "谢谢参与")
				{
					Notiflix.Notify.info(txt)
					opp()
					nopeople.css({display:"none"})
					return false
				}else{
					Notiflix.Notify.success(txt)

					var today = new Date()
					var now = today.toLocaleString()
					
					// DOM数据到表格上
					jsonData.unshift({
						nickname:nickname,
						txt:txt,
						now:now
					});
					console.log(jsonData);
					localStorage.setItem('data',JSON.stringify(jsonData));
					$(".tt").empty();
					for(key in jsonData){
						var text = `<tr>
								<td>${jsonData[key].nickname}</td>
								<td>${jsonData[key].txt}</td>
								<td>${jsonData[key].now}</td>
							</tr>`
						$(".tt").prepend(text);
					}

					if(!$('#userlist tr:first').is(nopeople)){
					nopeople.css({display:"none"})
					}
				}
			}
		})
		console.log(txt);
	}
	function cache(){
		location.href = "./cache.html"
	}
	var jsonData = JSON.parse(localStorage.getItem('data'));
	if(!jsonData){
		console.log(jsonData = []);
		jsonData = [];
		jsonData.push({nickname: "Sky0", txt: "三等奖88元", now: "2021/6/21<br />14:44:32"})
		jsonData.push({nickname: "谁啊谁..", txt: "10元现金券", now: "2021/6/21<br />14:44:32"})
		jsonData.push({nickname: "啊你说..", txt: "三等奖88元", now: "2021/6/21<br />14:44:32"})
		jsonData.push({nickname: "He oo", txt: "100元现金券", now: "2021/6/21<br />14:44:32"})
		jsonData.push({nickname: "〒_〒", txt: "VIP会员", now: "2021/6/21<br />14:44:32"})
	}
</script>